import React from 'react';
import classNames from 'classnames';
import {
  Row,
  Col,
  Panel,
  Button
} from 'react-bootstrap';

import * as Util from '../common/Util';
import * as Apis from '../config/Apis';
import * as Shell from '../common/Shell';
import Notify from '../common/Notification';
import { message as MessageConfig, domain } from '../config/Common';

class MessageBuy extends React.Component {

  constructor() {
    super();
  }

  static propTypes = {
       
  }

  openExternalLink(url){
    let params = { url, showCloseBtn : true, title : '在线行情' };
    Shell.callShellMethod( "webViewPlugin", null, null, params );
  }

  handleProductOpClick(e){
    let { handleProductOp } = this.props;

    handleProductOp(e); 
  }

  render(){

      let { message } = this.props;

      let stockcode = message.stockcode;
      let stockarea = Util.getStockArea(stockcode);
      let stockMarketApi = String.format(Apis.stockMarketApi, stockcode, stockarea);
      let stockTradeApi = String.format(Apis.stockTradeApi, stockcode, stockarea);

      return (
          <Panel className="product-item message-item">
                  <div className="product-avatar">
                    <img src={`${domain}${message.pic}`} className="img-circle"/>
                  </div>
                  <div className="product-detail">
                      <h4 className="text-info title">
                        {message.name}
                      </h4>
                      <p className="text-info item">
                          <label>
                            { Util.DateFormater(message.tradetime, 'MM-dd hh:mm') }
                          </label>
                      </p>
                  </div>
                  <div className="product-op text-right">
                      {
                        (message.id !== "" && (message.msgconfirm === "" || message.msgconfirm === "2"))?
                        <Button bsSize="sm" className="btn-bordered btn-spread" onClick={this.openExternalLink.bind(this, stockMarketApi)}>
                          行情
                        </Button>
                        :
                        message.viewstatus === MessageConfig.messageStatus.hasSign?
                        <Button bsSize="sm" className="btn-bordered btn-spread" onClick={ this.handleProductOpClick.bind(this) }>
                          已关注
                        </Button>
                        :
                        <Button bsSize="sm" className="btn-bordered btn-spread" onClick={ this.handleProductOpClick.bind(this) }>
                          加关注
                        </Button>
                      }
                  </div>

                  <div className="devider"></div>

                  <div className="product-data"> 
                      <Panel className="panel-thin">
                          <Row className="product-data-row">
                            <Col xs={8}>
                                <p>
                                    买入&nbsp;{message.stockname}（{message.stockcode}）
                                </p>
                                <p>
                                    成本&nbsp;{parseFloat(message.stockprice).toFixed(2)}&nbsp;元
                                </p>
                                <p>
                                  仓位&nbsp;
                                  {
                                    parseFloat(message.position) > 0?
                                    `${message.position}%`
                                    : 
                                    `—`
                                  }
                                </p>
                            </Col>
                            <Col xs={4}>
                                <p className="text-right">
                                    收益率
                                </p>
                                <p>
                                    <h5 className="text-danger text-right">&nbsp;—&nbsp;</h5>
                                </p>
                            </Col>
                          </Row>
                      </Panel>

                      <div className="padding padding-bottom-none text-center">
                          {
                            (message.id !== "" && (message.msgconfirm === "" || message.msgconfirm === "2"))?
                            <Button bsStyle="danger" block onClick={this.openExternalLink.bind(this, stockTradeApi)}>
                              买入
                            </Button>
                            :
                            <Button bsStyle="danger" block disabled>
                              买入
                            </Button>
                          }
                      </div>
                  </div>
          </Panel>
      );
  }
}

export default MessageBuy;